<template>
  <div>
    <!-- <headers ></headers> -->
    <el-carousel :interval="5000" arrow="always" height="580px" style="margin-top: 0px;">
      <el-carousel-item v-for="item in list" :key="item.name">
        <div
          style="height: 580px;background-image: url('https://img.alicdn.com/imgextra/i1/O1CN016mXtxD1fgzhjMfjz4_!!6000000004037-2-tps-3840-1240.png');background-size: cover;width: 100%;">
          <el-row>
            <el-col :span="10">
              <img src="https://znunwm.top/stu/assets/img/banner/b-shape1.png" style="width: 100%;height: 440px;">
              <div style="position: absolute;top: 120px;left: 180px;width: 500px;">
                <div class="title1">{{ item.name }}</div>
                <div class="zi1" style="margin-bottom: 10px;"> {{ item.introduce }}</div>
                <el-button type="primary" @click="open(item.url)" v-if="item.url !== ''">进入平台</el-button>
              </div>
            </el-col>
            <div>
            </div>
          </el-row>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="lunxia">
      <lunxia></lunxia>
    </div>
    <!-- <div style="position: absolute;right: 30px;">
      <el-image style="width: 100px; height: 100px" src="https://i02piccdn.sogoucdn.com/aa5679f00fc09ae6" :fit="fit"></el-image>
    </div> -->
    <!-- <user></user> -->

    <div class="contnet" style="margin-top: 220px;">
      <div class="title">旗下站点</div>
      <el-row :gutter="25" style="padding-top: 25px;">
        <el-col :span="6" v-for="item in list" :key="item.url">
          <el-card shadow="hover" style="border-radius: 10px;height: 320px;">
            <div style="display: flex;align-items: flex-start;justify-content: center;padding-top: 20px;">
              <img :src="item.prc" style="width: 220px;height:140px;margin: auto;"
                @click="dialogVisible = item.url === '' ||item.url===null? true : false">
            </div>
            <div style="text-align: center;font-size: 18px;margin-bottom: 10px;" class="zi">{{ item.name }}</div>
            <div class="zi" style="font-size: 12px;height: 40px;letter-spacing: 1px;overflow: hidden;">简介：{{
              item.introduce }}</div>
            <div style="display: flex;align-items: center;margin-top: 0px;" v-if="item.url!==''&&item.url!==null">
              <div @click="open(item.url)" style="cursor: pointer;">立即前往</div>
              <i class="el-icon-arrow-right"></i>
            </div>

            <el-dialog title="前往体验" :visible.sync="dialogVisible" width="23%" :before-close="handleClose">
              <img src="../assets/xia.png"
                style="widows: 200px;height: 200px;margin-left: 45px;max-width: 100%;max-height: 100%;">
            </el-dialog>
            <!-- 
            <div v-if="dang === item.name && dialogVisible" style="position: absolute;top: 0;">
              <img src="../assets/xia.png" style="widows: 200px;height: 200px;">
            </div> -->

          </el-card>
        </el-col>
      </el-row>
      <div style="display: flex;align-items: center;justify-content: center;margin-top: 50px;padding-bottom: 20px">
        <el-button type="primary" plain @click="view()">浏览更所站点</el-button>
      </div>
    </div>

    <div class="content3">
      <el-row>
        <el-col :span="13">
          <img src="../assets/about.png" style="width: 100%;margin-top: 78px">
        </el-col>
        <el-col :span="9">
          <div style="margin-top: 240px;margin-left: 40px;">
            <div class="about"> About Us</div>
            <div class="zi"> 一个专注安全领域的平台，从0到1的体验，帮助更多草根站长零基础学习安全！</div>
          </div>
          <div style="margin-top: 25px;margin-left: 40px;">
            <el-button type="primary"><a href="#targter">联系作者</a></el-button>
            <el-button type="primary" plain><a href="#targter">参与发展</a></el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="contnt4">
      <el-row>
        <el-col :span="12">
          <div style="margin-top: 250px;margin-left: 60px;color: #ffffff;">
            <div class="about" style="color: #ffffff;"> 小程序是否会中断更新？</div>
            <div class="zi" style="color: #ffffff;"> 它是由本人经营的网站，宗旨是:希望每个人喜欢上编程。</div>
          </div>
        </el-col>
        <el-col :span="10">
          <img src="../assets/touch.png"
            style="width: 100%;margin-top: 50px;height: 100%;max-width: 100%;max-width: 100%;">
        </el-col>
      </el-row>
    </div>


    <div class="contnt5">
      <div class="title" style="margin-top: 60px; margin-left: 100px;">合作伙伴</div>
      <el-row :gutter="25" style="padding-top: 180px;margin-left: 150px;">
        <el-col :span="7">
          <el-card shadow="hover" style="border-radius: 10px;height: 360px;">
            <div style="display: flex;align-items: center;justify-content: center;">
              <img src="@/assets/21.png" style="width: 300px;height:300px;">
            </div>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card shadow="hover" style="border-radius: 10px;height: 360px;">
            <div style="display: flex;align-items: center;justify-content: center;">
              <img src="@/assets/22.png" style="width: 300px;height:300px;">
            </div>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card shadow="hover" style="border-radius: 10px;height: 360px;">
            <div style="display: flex;align-items: center;justify-content: center;">
              <img src="@/assets/23.jpg" style="width: 300px;height:300px;">
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div id="targter"></div>
    <footers></footers>
  </div>
</template>

<script>
import user from '../socket/user.vue'
import headers from '../components/nav.vue';
import footers from '../components/footers.vue';
import lunxia from '../components/lunxia.vue'
export default {
  data() {
    return {
      list: [
        // {
        //   prc: 'https://img-blog.csdnimg.cn/direct/5520ee43ba074f06b991a00d2b94e4ef.png#pic_center',
        //   url: '',
        //   name: '煋玥阁',
        //   introduce: '融合了相册，账单，动态，文章 于一体的微信小程序',
        // },
        // {
        //   prc: 'https://img-blog.csdnimg.cn/direct/65ccdad44e614a1dbfb589c8e6f1a151.png',
        //   url: 'http://101.34.68.175/blog/#/',
        //   name: '煋玥博客',
        //   introduce: '发布文章、图片等内容的博客网站',
        // },
        // {
        //   prc: 'https://img-blog.csdnimg.cn/direct/ad110e480ce9447ca0fc76e0c6b975a3.png',
        //   url: 'http://101.34.68.175/atlas/#/',
        //   name: '中药图谱',
        //   introduce: '集成了知识检索、可视化、智能问答等功能的智能化知识服务产品',
        // },
        // {
        //   prc: 'https://img-blog.csdnimg.cn/direct/9e600781d1fc4f848edfdcab5047b19d.png#pic_center',
        //   url: 'http://39.98.162.10/culture/#/',
        //   name: '拾遗',
        //   introduce: '传承和创新，帮助公众了解非遗的内涵和价值',
        // }
      ],
      dialogVisible: false,
      dang: ''
    };
  },
  created(){
   this.getZhandian()
  },
  methods: {
    getZhandian() {
      this.$http.get("/zhandian/zhandianPage?&page="+4+"&num="+1).then((res) => {
        this.list=res.data.records
      });
    },
    open(lient) {
      window.open(lient, '_blank');
    },
    view() {
      this.$router.push('zhandian')
    },
    handleClose(done) {
      done();
    }
  },
  components: {
    lunxia,
    headers,
    footers,
    user
  }
}
</script>
<style scoped >
.zi1 {
  margin-top: 20px;
  font-family: "Montserrat", sans-serif;
  color: #231d70;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;
}

.title1 {
  margin-top: 60px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #231d70;
  font-size: 40px;
  letter-spacing: 5px;
  width: 87%;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;
}

.lun {
  width: 100%;
  background-image: url('../assets/lun/banner-bg.0551b7cc.png');
  background-size: 100% 100%;
  height: 590px;
  position: relative;
}

.lunxia {
  /* border: 1px solid #a39c9c; */
  /* 边框样式 */
  box-shadow:
    0 2px 6px rgba(179, 175, 175, 0.5)
    /* 底部阴影 */
    ,
    0 -2px 5px rgba(122, 119, 119, 0.5)
    /* 顶部阴影 */
    ,
    2px 0 4px rgba(238, 234, 234, 0.5)
    /* 左侧阴影 */
    ,
    0px 0 1px rgba(238, 234, 234, 0.5)
    /* 右侧阴影 */
  ;
  height: 141px;
  width: 1200px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 639px;
  z-index: 2;
  left: 50%;
  transform: translate(-50%, -50%);

}

.contnet {
  margin-bottom: 80px;
  margin-left: 100px;
  margin-right: 100px;

}

.about {
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #231d70;
  font-size: 40px;
  letter-spacing: 5px;
  width: 87%;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;
}

.zi {
  margin-top: 20px;
  font-family: "Montserrat", sans-serif;
  color: #231d70;
  letter-spacing: 5px;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;
}

.title {
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #231d70;
  font-size: 40px;
  letter-spacing: 5px;
  margin: -80px 0 0 0;
  position: absolute;
  text-align: center;
  width: 87%;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;
}

.content3 {
  width: 100%;
  height: 650px;
  background-color: #fff9f5;
  padding-bottom: 10px;
}

.contnt4 {
  width: 100%;
  height: 650px;
  background-color: #231d70;
}

.contnt5 {
  width: 98%;
  height: 650px;
  background-color: #ffffff;
}


/* 
@keyframes move {
  0% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  25% {    
    text-shadow:      
      -4px -4px 0 hsla(180, 100%, 50%, 1), 
      -3px -3px 0 hsla(180, 100%, 50%, 1), 
      -2px -2px 0 hsla(180, 100%, 50%, 1), 
      -1px -1px 0 hsla(180, 100%, 50%, 1),
      4px 4px 0 hsla(0, 100%, 50%, 1), 
      3px 3px 0 hsla(0, 100%, 50%, 1), 
      2px 2px 0 hsla(0, 100%, 50%, 1), 
      1px 1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  50% {
    text-shadow:
      -4px 4px 0 hsla(0, 100%, 50%, 1), 
      -3px 3px 0 hsla(0, 100%, 50%, 1), 
      -2px 2px 0 hsla(0, 100%, 50%, 1), 
      -1px 1px 0 hsla(0, 100%, 50%, 1),
      4px -4px 0 hsla(180, 100%, 50%, 1), 
      3px -3px 0 hsla(180, 100%, 50%, 1), 
      2px -2px 0 hsla(180, 100%, 50%, 1), 
      1px -1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  75% {
    text-shadow:
      4px 4px 0 hsla(180, 100%, 50%, 1), 
      3px 3px 0 hsla(180, 100%, 50%, 1), 
      2px 2px 0 hsla(180, 100%, 50%, 1), 
      1px 1px 0 hsla(180, 100%, 50%, 1),
      -4px -4px 0 hsla(0, 100%, 50%, 1), 
      -3px -3px 0 hsla(0, 100%, 50%, 1), 
      -2px -2px 0 hsla(0, 100%, 50%, 1), 
      -1px -1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  100% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }  
} */
a {
  text-decoration: none;
}
</style>